<header class="header navbar bg-white shadow">
  <div class="btn-group tool-button">
    <a class="btn btn-primary navbar-btn" href="/private/wx/reply?type=<%- type %>" data-pjax><i
        class="ti-angle-left"></i> 返回</a>
  </div>
</header>

<div class="content-wrap">
  <div class="wrapper" style="min-height:500px;">
    <section class="panel panel-form">
      <form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate
            action="/private/wx/reply/addDo" method="post">
        <input id="content" name="content" type="hidden">
        <input id="type" name="type" type="hidden" value="<%- type %>">

        <div class="row mb10">
          <div class="col-lg-12">
            <div class="form-group">
              <label for="content" class="col-sm-2 control-label">绑定事件</label>

              <div class="col-sm-8" style="padding-top: 6px;">
                <% if(type == 'follow'){ %>
                关注事件
                <% }else{ %>
                关键词事件
                <% } %>
              </div>
            </div>
            <div class="form-group">
              <label for="title" class="col-sm-2 control-label">公众号</label>

              <div class="col-sm-8">
                <select name="wxid" class="form-control">
                  <% if(list){
                    list.forEach(function(o){
                  %>
                  <option value="<%= o.id %>"><%- o.appname %></option>
                  <%
                  });
                  } %>
                </select>
              </div>
            </div>
            <% if(type == 'keyword'){
            %>
            <div class="form-group">
              <label for="content" class="col-sm-2 control-label">关键词</label>

              <div class="col-sm-8">
                <input name="keyword" type="text" data-parsley-required="true" class="form-control"
                       data-parsley-maxlength="20">

                <p class="help-block no-m">缺省关键词：default</p>
              </div>
            </div>
            <%
            } %>
            <div class="form-group">
              <label for="content" class="col-sm-2 control-label">绑定类型</label>

              <div class="col-sm-8">
                <div class="radio"><label>
                  <input type="radio" name="msgtype" value="txt" checked>文本消息</label></div>

                  <div class="radio"><label> <input type="radio" name="msgtype" value="news">图文消息</label></div>


              </div>
            </div>
            <div class="form-group">
              <label for="content" class="col-sm-2 control-label">消息内容</label>

              <div class="col-sm-8">
                <div class="btn-group tool-button">
                  <a class="btn btn-primary navbar-btn" id="sel"> 选择内容</a>
                  <a class="btn btn-danger navbar-btn" id="del">清除内容</a>

                </div>
                <div class="dd" id="nestable3">
                  <ol class="dd-list">
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
          <div class="form-group text-center">
            <label></label>

            <div>
              <button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交..." id="submit">提 交
              </button>
            </div>
          </div>
        </div>
      </form>
    </section>

  </div>
</div>
<div id="dialogSelect" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>
<script language="JavaScript">
  var msgtype;
  $(document).ready(function () {
    $('input:radio[name=msgtype]').click(function () {
      $("#nestable3 .dd-list").html("");
    });
    $("#dialogSelect").on("hidden.bs.modal", function () {
      $(this).removeData("bs.modal");
    });
    $("#sel").on("click", function () {
      var msgtype = $('input:radio[name=msgtype]:checked').val();
      $("#dialogSelect").modal({
        remote: "/private/wx/reply/select?msgtype=" + msgtype
      });
    });
    $("#del").on("click", function () {
      $("#nestable3 .dd-list").html("");
    });
    $("#submit").on("click", function () {
      var data = $("#nestable3").nestable('serialize');
      var ids = [];
      if (data) {
        $.each(data, function (i, n) {
          ids.push(n.id);
        });
      }
      if (ids.length < 1 || ids.indexOf("nestable3") > -1) {
        Toast.error("请选择内容");
        return false;
      } else if (ids.length > 10) {
        Toast.error("图文消息不能大于10条");
        return false;
      }
      $("#content").val(ids.toString());
      $('#addForm').ajaxForm({
        dataType: 'json',
        beforeSubmit: function (arr, form, options) {

          form.find("button:submit").button("loading");
        },
        success: function (data, statusText, xhr, form) {
          if (data.code == 0) {
            Toast.success(data.msg);

          } else {
            Toast.error(data.msg);
          }
          form.find("button:submit").button("reset");
        }
      });
    });

  });
</script>
